<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-select:0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <link rel="stylesheet" href="css/style.css">
    <title>simple template</title>
    <script>
        (function(win,doc){
            var UA = navigator.userAgent,
                isAndroid = /android|adr/gi.test(UA),
                isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid;
            var docEl = doc.documentElement;
            var refreshRem =function (){
                var w =docEl.getBoundingClientRect().width || 320;
                var fs = w/320 * 20;
                fs = fs > 40 ? 40 : fs;
                docEl.style.fontSize = fs+'px';
            },refreshRemId;
            win.addEventListener('resize', function() {
                clearTimeout(refreshRemId);
                refreshRemId = setTimeout(refreshRem, 100);
            }, false);
            win.addEventListener('pageshow', function(e) {
                if (e.persisted) {
                    clearTimeout(refreshRemId);
                    refreshRemId = setTimeout(refreshRem, 100);
                }
            }, false);
            refreshRem();
        })(window,document);
    </script>
</head>
<body>
<p class="tips">滚轮缩放<br>拖拽旋转</p>
<div class="scene" id="js-scene">
    <div class="phone" id="js-phone">
        <div class="front">
            <div class="cam" id="js-cam"></div>
            <div class="screen" id="js-screen">
                <video id="js-video" loop preload src="https://public1.video.meipai.com/meitushop/t9/t9-video-image.mp4"></video>
            </div>
        </div>
        <div class="back">
            <div class="ct bg"></div>
            <div class="lp lt-1 bg">
                <div class="lp lt-2 bg">
                    <div class="lp lt-3 bg">
                        <div class="lp lt-4 bg"></div>
                    </div>
                </div>
            </div>
            <div class="rp rt-1 bg">
                <div class="rp rt-2 bg">
                    <div class="rp rt-3 bg">
                        <div class="rp rt-4 bg"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="left">
            <div class="ltt ltt-1">
                <div class="ltt ltt-2">
                    <div class="ltt ltt-3">
                        <div class="ltt ltt-4"></div>
                    </div>
                </div>
            </div>
            <div class="ltb ltb-1">
                <div class="ltb ltb-2">
                    <div class="ltb ltb-3">
                        <div class="ltb ltb-4"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="rtt rtt-1">
                <div class="rtt rtt-2">
                    <div class="rtt rtt-3">
                        <div class="rtt rtt-4"></div>
                    </div>
                </div>
            </div>
            <div class="rtb rtb-1">
                <div class="rtb rtb-2">
                    <div class="rtb rtb-3">
                        <div class="rtb rtb-4"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top">
            <div class="tp tp-1">
                <div class="tpl tpl-1">
                    <div class="tpl tpl-2">
                        <div class="tpl tpl-3">
                            <div class="tpl tpl-4">
                                <div class="tpl tpl-5">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tp tp-2">
                <div class="tpr tpr-1">
                    <div class="tpr tpr-2">
                        <div class="tpr tpr-3">
                            <div class="tpr tpr-4">
                                <div class="tpr tpr-5">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ld ld-1">
                <div class="ld ld-2">
                    <div class="ld ld-3">
                        <div class="ld ld-4"></div>
                    </div>
                </div>
            </div>
            <div class="rd rd-1">
                <div class="rd rd-2">
                    <div class="rd rd-3">
                        <div class="rd rd-4"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="bt bt-1">
                <div class="btl btl-1">
                    <div class="btl btl-2">
                        <div class="btl btl-3">
                            <div class="btl btl-4">
                                <div class="btl btl-5">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bt bt-2">
                <div class="btr btr-1">
                    <div class="btr btr-2">
                        <div class="btr btr-3">
                            <div class="btr btr-4">
                                <div class="btr btr-5">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ld ld-1">
                <div class="ld ld-2">
                    <div class="ld ld-3">
                        <div class="ld ld-4"></div>
                    </div>
                </div>
            </div>
            <div class="rd rd-1">
                <div class="rd rd-2">
                    <div class="rd rd-3">
                        <div class="rd rd-4"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="//cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
<script>
    $(function(){
        var diffX,x=0,diffY,y=0,p=null;
        document.addEventListener('touchmove',function(e){

            e.preventDefault();
        },true)
        $(document).bind('mousedown touchstart',function(e){
            if(e.touches){
                e = e.touches[0]
            }
            console.log(e)
            clearInterval(p);
            var xBe=e.clientX;
            var yBe=e.clientY;
            $(this).bind("mousemove touchmove",function(e){
                if(e.touches){
                    e = e.touches[0]
                }
                var xNo=e.clientX;
                diffX=xNo-xBe;
                xBe=e.clientX;
                x+=diffX*.2;
                //
                var yNo=e.clientY;
                diffY=yNo-yBe;
                yBe=e.clientY;
                y-=diffY*.2;
                $("#js-phone").css({"transform":"rotateX("+y+"deg) rotateY("+x+"deg) "});

            });
        });
        //
        $(document).bind('mouseup touchend',function(){
            $(this).unbind("mousemove touchmove");
            var p=setInterval(function(){
                diffX*=.95;
                diffY*=.95;
                x+=diffX*.2;
                y-=diffY*.2;
                $("#js-phone").css({"transform":"rotateX("+y+"deg) rotateY("+x+"deg) "});
                if(Math.abs(diffX)<.5&&Math.abs(diffY)<.5){
                    clearInterval(p);
                }
            },30);
        });
        var scale = .8;
        $("#js-scene").css('-webkit-transform','scale('+ scale +')')
        $(document).bind('mousewheel',function(e){
            console.log(e)
            e.preventDefault()
            if(e.deltaY < 0){
                scale += 0.1
            }else{
                scale -= 0.1
            }
            if(scale < 0.5){
                scale = 0.5
            }
            if(scale > 1.2){
                scale = 1.2
            }
            $("#js-scene").css('-webkit-transform','scale('+ scale +')')
            console.log(scale)
        })
        $('#js-cam').bind('click',function(){
            $("#js-screen").addClass('show')
            $("#js-video")[0].play()
        })
    });
</script>
</body>
</html>
